<template>
    <Row>
        <Col span="24">
            <Card :dis-hover="false">
                <BaseTable ck op pager front :total="total" @add="addHandler" @delete="deleteHandler" @update="updateHandler" @refresh="getAll" :columns="columns" :data="dataAll"></BaseTable>
                <Modal v-model="editData" title="资源信息" :mask-closable="false" class="editm" @on-ok="asyncOK" @on-cancel="asyncCancel">
                    <Form ref="editForm" :model="formData" :label-width="80" position="left"  :rules="ruleValidate">
                        <FormItem label="Key" prop="Name">
                            <Input v-model.trim="formData.Key"></Input>
                        </FormItem>

                        <FormItem label="值类型"  prop="Pid">
                            <Select v-model="formData.Type" >
                                <Option v-for="item in KeyType" :key="item.value" :value="item.value">{{ item.key }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="Value">
                            <Input v-model.trim="formData.Value"></Input>
                        </FormItem>
                    </Form>
                </Modal>
            </Card>
        </Col>
    </Row>
</template>

<script>
    import { mapMutations, mapGetters, mapState } from 'vuex';
    import BaseTable from '@/components/table/table.vue';
    export default {
        name: "param",
        components: {
            BaseTable
        },
        data () {
            return {
                loading: false, // 数据刷新遮罩层
                columns: [
                    {
                        title: "索引",
                        type: "index"
                    },
                    {
                        title: "Key",
                        key: "Key"
                    },
                    {
                        title: "Value类型",
                        render: (h, {row}) => {
                            let txt = ""
                            switch (row.Type) {
                                case 0:
                                    txt = "数值"
                                    break
                                case 1:
                                    txt = "字符"
                                    break
                                case 2:
                                    txt = "JSON"
                                    break
                                case 3:
                                    txt = "布尔"
                                    break
                                default:
                                    txt = "其他"
                            }
                            return h('span', {}, txt)
                        }
                    },
                    {
                        title: "Value",
                        key: "Value"
                    }
                ], // 表格样式
                dataAll: [], // 表格数据来源
                total: 0,
                addFlag: true,
                formData: {},
                editData: false,
                ruleValidate: {
                    Key: [
                        {
                            required: true,
                            message: 'Key不能为空',
                            trigger: 'blur'
                        }
                    ],
                    Value: [
                        {
                            required: true,
                            message: 'Value不能为空',
                            trigger: 'blur'
                        }
                    ],
                    Type:[
                        {
                            required: true,
                            message: '请选择value类型',
                            trigger: 'blur'
                        }
                    ]

                },
                KeyType: [
                    {
                        key: '数值',
                        value: 0
                    },
                    {
                        key: '字符',
                        value: 1
                    },
                    {
                        key: 'JSON',
                        value: 2
                    },
                    {
                        key: '布尔',
                        value: 3
                    },
                ]
            }
        },
        computed: {

        },
        methods: {
            getAll () {
                this.$api.getAllParam().then(rsp => {
                    this.dataAll = rsp.Data
                    this.total = this.dataAll.length
                }, err => {
                    if (err) {
                        this.$Message.error(err)
                    }
                })
            },
            addHandler () {
                this.addFlag = true;
                this.$refs['editForm'].resetFields();
                this.editData = true;
            },
            deleteHandler (params) {
                // DeleteResouce2s
                console.log(params.length);
                if (params.length === 0) {
                    this.$Message.warning('请选择一条数据操作！');
                } else if (params.length > 0) {
                    this.$Modal.confirm({
                        title: '操作确认',
                        content: '删除后可能会影响其它功能使用，确认删除选中的数据吗？',
                        onOk: () => {
                            this.$api.deleteParam(params).then(res => {
                                this.$Message.info('删除成功！');
                                this.getAll();
                            });
                        }
                    });
                }
            },
            updateHandler (params) {
                // console.log(params);
                if (params.length !== 1) {
                    this.$Message.warning('请选择一条数据操作！');
                } else {
                    this.addFlag = false;
                    this.formData = params[0];
                    this.editData = true;
                }
            },
            asyncOK () {
                this.$refs['editForm'].validate(valid => {
                    if (valid) {
                        if (!this.addFlag) {
                            // this.$api.updateResource(this.formItem).then(res => {
                            this.$api.updateParam(this.formData).then(res => {
                                if (!res.error) {
                                    this.getAll();
                                    this.$Message.success(res.message);
                                } else {
                                    this.$Message.error(res.message, 4);
                                }
                            });
                        } else if (this.addFlag) {
                            // this.$api.addResource(this.formItem).then(res => {
                            this.$api.addParam(this.formData).then(res => {
                                if (!res.error) {
                                    this.getAll();
                                    this.$Message.success(res.message);
                                } else {
                                    this.$Message.error(res.message, 4);
                                }
                            });
                        }
                        setTimeout(() => {
                            this.editData = false;
                        }, 500);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                });
            },
            asyncCancel () {
                this.getAll();
            }
        },
        mounted() {
            this.getAll()
        }
    }
</script>

<style scoped>

</style>